import React from "react"
import { TabBar } from 'antd-mobile';
import { Route } from "react-router-dom"
//引入svg图标
import cartIcon from "@/assets/icons/cart.svg"
import cartIcon1 from "@/assets/icons/cart1.svg"
import homeIcon from "@/assets/icons/home.svg"
import homeIcon1 from "@/assets/icons/home1.svg"
import myIcon from "@/assets/icons/my.svg"
import myIcon1 from "@/assets/icons/my1.svg"
//引入路由页面
import Home from "@/pages/Home"
import Cart from "@/pages/Cart"
import My from "@/pages/My"
class BaseTabBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
            hidden: false,
            fullScreen: true,
        };
    }
    static getDerivedStateFromProps(nextProps) {
        console.log(nextProps)
        if (nextProps.location.pathname === "/") {
            //当浏览器的路径是/的时候,那么默认让选项卡跳转到home这个选项
            return {
                selectedTab: "/home"
            }
        } else {
            return {
                selectedTab: nextProps.location.pathname
            }
        }

    }
    render() {
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(' + homeIcon + ') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: 'url(' + homeIcon1 + ') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selected={this.state.selectedTab === '/home'}

                        onPress={() => {
                            this.props.history.push("/home")
                            this.setState({
                                selectedTab: '/home',
                            });
                        }}
                        data-seed="logId"
                    >
                        {<Route path="/home" component={Home} />}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + cartIcon1 + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + cartIcon + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="购物车"
                        key="cart"

                        selected={this.state.selectedTab === '/cart'}
                        onPress={() => {
                            this.props.history.push("/cart")
                            this.setState({
                                selectedTab: '/cart',
                            });
                        }}
                    >
                        {<Route path="/cart" component={Cart} />}
                    </TabBar.Item>
                    <TabBar.Item
                        badge={9999 + "+"}
                        icon={{ uri: myIcon }}
                        selectedIcon={{ uri: myIcon1 }}
                        title="我的"
                        key="my"
                        selected={this.state.selectedTab === '/my'}
                        onPress={() => {
                            this.props.history.push("/my")
                            this.setState({
                                selectedTab: '/my',
                            });
                        }}
                    >
                        {<Route path="/my" component={My} />}
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default BaseTabBar